%base {
  --color-white: #FFFFFF;
  --color-black: #000000;

  --color-primary: #0077ff;
  --color-primary-light-1: #1984ff;
  --color-primary-light-2: #3392ff;
  --color-primary-light-3: #4c9fff;
  --color-primary-light-4: #66adff;
  --color-primary-light-5: #7fbbff;
  --color-primary-light-6: #99c8ff;
  --color-primary-light-7: #b2d6ff;
  --color-primary-light-8: #cce3ff;
  --color-primary-light-9: #e5f1ff;
  --color-primary-light-10:#00CCFF;
  --color-success: #67C23A;
  --color-success-light: #e0f2d7;
  --color-success-lighter: #eff8eb;
  --color-danger: #f56c6c;
  --color-danger-light: #ffd2d2;
  --color-danger-lighter: #ffe8e8;
  --color-warning: #E6A23C;
  --color-warning-light: #faecd8;
  --color-warning-lighter: #fcf5eb;
  --color-info: #909399;
  --color-info-light: #e8e9ea;
  --color-info-lighter: #f3f4f4;

  --color-text-primary: #303133;
  --color-text-regular: #606266;
  --color-text-secondary: #909399;
  --color-text-placeholder: #D9D9D9;

  --border-color-base: #DCDFE6;
  --border-color-light: #E4E7ED;
  --border-color-lighter: #EBEEF5;
  --border-color-extra-light: #F2F6FC;

  --background-color-base: #F5F7FA;

  --link-color: var(--color-primary-light-2);
  --link-hover-color: var(--color-primary);

  --border-color-hover: var(--color-text-placeholder);

  --fill-base: var(--color-white);

  --font-color-disabled-base: #bbb;

  --divider-color: var(--border-color-base);

  --disabled-fill-base: var(--background-color-base);
  --disabled-color-base: var(--color-text-placeholder);
  --disabled-border-base: var(--border-color-light);

  --color-icon: #666;
  --icon-color-base: var(--color-info);

  --checkbox-font-color: var(--color-text-regular);
  --checkbox-background-color: var(--color-content-bg);
  --checkbox-input-border: var(--border-color-base);
  --checkbox-disabled-border-color: var(--border-color-base);
  --color-checkbox-disabled-input-fill: #edf2fc;
  --checkbox-disabled-icon-color: var(--color-text-placeholder);
  --checkbox-disabled-checked-input-fill: var(--border-color-extra-light);
  --checkbox-disabled-checked-input-border-color: var(--border-color-base);
  --checkbox-disabled-checked-icon-color: var(--color-text-placeholder);
  --checkbox-checked-font-color: var(--color-primary);
  --checkbox-checked-input-border-color: var(--color-primary);
  --checkbox-checked-background-color: var(--color-primary);
  --checkbox-checked-icon-color: var(--fill-base);
  --checkbox-input-border-color-hover: var(--color-primary);
  --checkbox-button-checked-background-color: var(--color-primary);
  --checkbox-button-checked-font-color: var(--color-white);
  --checkbox-button-checked-border-color: var(--color-primary);

  --radio-font-color: var(--color-text-regular);
  --radio-input-background-color: #fff;
  --radio-input-border-color: var(--border-color-base);
  --radio-icon-color: var(--color-white);
  --radio-disabled-input-border-color: var(--disabled-border-base);
  --radio-disabled-input-fill: var(--disabled-fill-base);
  --radio-disabled-icon-color: var(--disabled-fill-base);
  --radio-disabled-checked-input-border-color: var(--disabled-border-base);
  --radio-disabled-checked-input-fill: var(--disabled-fill-base);
  --radio-disabled-checked-icon-color: var(--color-text-placeholder);
  --radio-checked-font-color: var(--color-primary);
  --radio-checked-input-border-color: var(--color-primary);
  --radio-checked-input-background-color: var(--color-white);
  --radio-checked-icon-color: var(--color-primary);
  --radio-input-border-color-hover: var(--color-primary);
  --radio-button-checked-background-color: var(--color-primary);
  --radio-button-checked-font-color: var(--color-white);
  --radio-button-checked-border-color: var(--color-primary);
  --radio-button-disabled-checked-fill: var(--border-color-extra-light);
  --radio-button-border-color: var(--border-color-base);

  --select-border-color-hover: var(--border-color-hover);
  --select-disabled-border: var(--disabled-border-base);
  --select-close-hover-color: var(--color-text-secondary);
  --select-input-color: var(--color-text-placeholder);
  --color-select-multiple-input: #666;
  --select-input-focus-border-color: var(--color-primary);
  --select-option-color: var(--color-text-regular);
  --select-option-disabled-color: var(--color-text-placeholder);
  --select-option-disabled-background: var(--color-white);
  --select-option-hover-background: var(--background-color-base);
  --select-option-selected-font-color: var(--color-primary);
  --select-option-selected-hover: var(--background-color-base);
  --select-group-color: var(--color-info);
  --select-dropdown-background: var(--color-white);
  --select-dropdown-shadow: var(--box-shadow-light);
  --select-dropdown-empty-color: #999;
  --select-dropdown-border: var(--border-color-light);

  --alert-success-color: var(--color-success-lighter);
  --alert-info-color: var(--color-info-lighter);
  --alert-warning-color: var(--color-warning-lighter);
  --alert-danger-color: var(--color-danger-lighter);

  --messagebox-title-color: var(--color-text-primary);
  --messagebox-content-color: var(--color-text-regular);
  --messagebox-success-color: var(--color-success);
  --messagebox-info-color: var(--color-info);
  --messagebox-warning-color: var(--color-warning);
  --messagebox-danger-color: var(--color-danger);
  --message-background-color: #edf2fc;
  --message-close-icon-color: var(--color-text-placeholder);
  --message-close-hover-color: var(--color-text-secondary);
  --message-success-font-color: var(--color-success);
  --message-info-font-color: var(--color-info);
  --message-warning-font-color: var(--color-warning);
  --message-danger-font-color: var(--color-danger);

  --notification-border-color: var(--border-color-lighter);
  --notification-content-color: var(--color-text-regular);
  --notification-title-color: var(--color-text-primary);
  --notification-close-color: var(--color-text-secondary);
  --notification-close-hover-color: var(--color-text-regular);
  --notification-success-icon-color: var(--color-success);
  --notification-info-icon-color: var(--color-info);
  --notification-warning-icon-color: var(--color-warning);
  --notification-danger-icon-color: var(--color-danger);

  --input-font-color: var(--color-text-regular);
  --input-border-color: var(--border-color-base);
  --input-border-color-hover: var(--border-color-hover);
  --input-background-color: var(--color-white);
  --input-fill-disabled: var(--disabled-fill-base);
  --input-color-disabled: var(--font-color-disabled-base);
  --input-icon-color: var(--color-text-placeholder);
  --input-placeholder-color: var(--color-text-placeholder);
  --input-hover-border: var(--border-color-hover);
  --input-clear-hover-color: var(--color-text-secondary);
  --input-focus-border: var(--color-primary);
  --input-focus-fill: var(--color-white);
  --input-disabled-fill: var(--disabled-fill-base);
  --input-disabled-border: var(--disabled-border-base);
  --input-disabled-color: var(--disabled-color-base);
  --input-disabled-placeholder-color: var(--color-text-placeholder);

  --cascader-menu-font-color: var(--color-text-regular);
  --cascader-menu-selected-font-color: var(--color-primary);
  --cascader-menu-fill: var(--fill-base);
  --cascader-menu-border: var(--border-color-light);
  --cascader-node-background-hover: var(--background-color-base);
  --cascader-node-color-disabled: var(--color-text-placeholder);
  --cascader-color-empty: var(--color-text-placeholder);
  --cascader-tag-background: #f0f2f5;

  --group-option-fill-hover: rgba(0, 0, 0, 0.06);
  --group-title-color: var(--color-black);

  --tab-border-line: #e4e4e4;
  --tab-header-color-active: var(--color-text-secondary);
  --tab-header-color-hover: var(--color-text-regular);
  --tab-header-color: var(--color-text-regular);
  --tab-header-fill-active: rgba(0, 0, 0, 0.06);
  --tab-header-fill-hover: rgba(0, 0, 0, 0.06);
  --tab-vertical-header-count-color: var(--color-white);
  --tab-vertical-header-count-fill: var(--color-text-secondary);

  --button-default-font-color: var(--color-text-regular);
  --button-default-font-color-active: #008fb3;
  --button-default-background-color: var(--color-white);
  --button-default-background-color-active: var(--color-white);
  --button-default-border-color: var(--border-color-base);
  --button-default-border-color-active: #008fb3;
  --button-disabled-font-color: var(--color-text-placeholder);
  --button-disabled-background-color: var(--color-white);
  --button-disabled-border-color: var(--border-color-lighter);

  --button-primary-font-color: var(--color-white);

  --button-primary-border-color: var(--color-primary);

  --button-primary-background-color: var(--color-primary);
  --button-success-font-color: var(--color-white);
  --button-success-border-color: var(--color-success);
  --button-success-background-color: var(--color-success);
  --button-warning-font-color: var(--color-white);
  --button-warning-border-color: var(--color-warning);
  --button-warning-background-color: var(--color-warning);
  --button-danger-font-color: var(--color-white);
  --button-danger-border-color: var(--color-danger);
  --button-danger-background-color: var(--color-danger);
  --button-info-font-color: var(--color-white);
  --button-info-border-color: var(--color-info);
  --button-info-background-color: var(--color-info);

  --button-primary-background-color-hover: #3392ff;
  --button-primary-border-color-hover: #3392ff;
  --button-primary-background-color-active: #006be5;
  --button-primary-border-color-active: #006be5;
  --button-primary-background-color-disabled: #05448f;
  --button-primary-border-color-disabled: #05448f;
  --button-primary-background-color-plain: #e5f1ff;
  --button-primary-border-color-plain: #99c8ff;
  --button-success-background-color-hover: #85ce61;
  --button-success-border-color-hover: #85ce61;
  --button-success-background-color-active: #5cae34;
  --button-success-border-color-active: #5cae34;
  --button-success-background-color-disabled: #396a2c;
  --button-success-border-color-disabled: #396a2c;
  --button-success-background-color-plain: #eff8eb;
  --button-success-border-color-plain: #c2e6b0;
  --button-danger-background-color-hover: #ff4e4e;
  --button-danger-border-color-hover: #ff4e4e;
  --button-danger-background-color-active: #e51e1e;
  --button-danger-border-color-active: #e51e1e;
  --button-danger-background-color-disabled: #851a20;
  --button-danger-border-color-disabled: #851a20;
  --button-danger-background-color-plain: #ffe8e8;
  --button-danger-border-color-plain: #ffa6a6;
  --button-warning-background-color-hover: #ebb463;
  --button-warning-border-color-hover: #ebb463;
  --button-warning-background-color-active: #cf9136;
  --button-warning-border-color-active: #cf9136;
  --button-warning-background-color-disabled: #785a2d;
  --button-warning-border-color-disabled: #785a2d;
  --button-warning-background-color-plain: #fcf5eb;
  --button-warning-border-color-plain: #f5d9b1;
  --button-info-background-color-hover: #a6a8ad;
  --button-info-border-color-hover: #a6a8ad;
  --button-info-background-color-active: #818489;
  --button-info-border-color-active: #818489;
  --button-info-background-color-disabled: #4d525c;
  --button-info-border-color-disabled: #4d525c;
  --button-info-background-color-plain: #f3f4f4;
  --button-info-border-color-plain: #d2d3d6;

  --button-group-border-color: rgba(255, 255, 255, 0.5);

  --form-label-font: var(--color-text-regular);

  --switch-on-color: var(--color-primary);
  --switch-off-color: var(--border-color-base);
  --switch-color: var(--color-primary);
  --switch-color-active: var(--color-primary);
  --switch-button-color: var(--color-white);

  --dialog-background-color: var(--color-white);

  --table-background-color: var(--color-white);
  --table-border-color: var(--border-color-lighter);
  --table-border: var(--table-border-color);
  --table-font-color: var(--color-text-regular);
  --table-header-font-color: var(--color-text-secondary);
  --table-row-hover-background-color: var(--background-color-base);
  --table-row-background-color: var(--color-white);
  --table-row-background-color-odd: var(--color-white);
  --table-current-row-background-color: var(--color-primary-light-9);
  --table-header-background-color: var(--color-white);

  --pagination-background-color: var(--color-white);
  --pagination-font-color: var(--color-text-primary);
  --pagination-button-color: var(--color-text-primary);
  --pagination-button-disabled-color: var(--color-text-placeholder);
  --pagination-button-disabled-background-color: var(--color-white);
  --pagination-hover-color: var(--color-primary);
  --pagination-background-mode-bg-color: var(--color-info-lighter);
  --pagination-background-mode-color-active: var(--color-white);

  --popup-modal-background-color: var(--color-black);

  --popover-background-color: var(--color-white);
  --popover-border-color: var(--border-color-lighter);
  --popover-title-font-color: var(--color-text-primary);

  --tooltip-fill: var(--color-text-primary);
  --tooltip-color: var(--color-white);
  --tooltip-border-color: var(--color-text-primary);

  --tag-primary-background-color-plain: #7fbbff;
  --tag-primary-border-color-plain: #99c8ff;
  --tag-primary-color-plain: #0077ff;
  --tag-primary-color-close-plain: #0077ff;
  --tag-primary-color-close-background-hover-plain: #0077ff;
  --tag-primary-background-color-dark: #0077ff;
  --tag-primary-border-color-dark: #0077ff;
  --tag-primary-color-dark: #fff;
  --tag-primary-color-close-dark: #7fbbff;
  --tag-primary-color-close-background-hover-dark: #3392ff;
  --tag-primary-background-color: #b2d6ff;
  --tag-primary-border-color: #cce3ff;
  --tag-primary-color: #0077ff;
  --tag-primary-color-close: #0077ff;
  --tag-primary-color-close-background-hover: #0077ff;
  --tag-success-background-color-plain: #b3e09c;
  --tag-success-border-color-plain: #c2e6b0;
  --tag-success-color-plain: #67c23a;
  --tag-success-color-close-plain: #67c23a;
  --tag-success-color-close-background-hover-plain: #67c23a;
  --tag-success-background-color-dark: #67c23a;
  --tag-success-border-color-dark: #67c23a;
  --tag-success-color-dark: #fff;
  --tag-success-color-close-dark: #b3e09c;
  --tag-success-color-close-background-hover-dark: #85ce61;
  --tag-success-background-color: #d1ecc3;
  --tag-success-border-color: #e0f2d7;
  --tag-success-color: #67c23a;
  --tag-success-color-close: #67c23a;
  --tag-success-color-close-background-hover: #67c23a;
  --tag-danger-background-color-plain: #ff9090;
  --tag-danger-border-color-plain: #ffa6a6;
  --tag-danger-color-plain: #f56c6c;
  --tag-danger-color-close-plain: #f56c6c;
  --tag-danger-color-close-background-hover-plain: #f56c6c;
  --tag-danger-background-color-dark: #f56c6c;
  --tag-danger-border-color-dark: #f56c6c;
  --tag-danger-color-dark: #fff;
  --tag-danger-color-close-dark: #ff9090;
  --tag-danger-color-close-background-hover-dark: #ff4e4e;
  --tag-danger-background-color: #ffbcbc;
  --tag-danger-border-color: #ffd2d2;
  --tag-danger-color: #f56c6c;
  --tag-danger-color-close: #f56c6c;
  --tag-danger-color-close-background-hover: #f56c6c;
  --tag-warning-background-color-plain: #f2d09d;
  --tag-warning-border-color-plain: #f5d9b1;
  --tag-warning-color-plain: #e6a23c;
  --tag-warning-color-close-plain: #e6a23c;
  --tag-warning-color-close-background-hover-plain: #e6a23c;
  --tag-warning-background-color-dark: #e6a23c;
  --tag-warning-border-color-dark: #e6a23c;
  --tag-warning-color-dark: #fff;
  --tag-warning-color-close-dark: #f2d09d;
  --tag-warning-color-close-background-hover-dark: #ebb463;
  --tag-warning-background-color: #f7e3c4;
  --tag-warning-border-color: #faecd8;
  --tag-warning-color: #e6a23c;
  --tag-warning-color-close: #e6a23c;
  --tag-warning-color-close-background-hover: #e6a23c;
  --tag-info-background-color-plain: #c7c9cc;
  --tag-info-border-color-plain: #d2d3d6;
  --tag-info-color-plain: #909399;
  --tag-info-color-close-plain: #909399;
  --tag-info-color-close-background-hover-plain: #909399;
  --tag-info-background-color-dark: #909399;
  --tag-info-border-color-dark: #909399;
  --tag-info-color-dark: #fff;
  --tag-info-color-close-dark: #c7c9cc;
  --tag-info-color-close-background-hover-dark: #a6a8ad;
  --tag-info-background-color: #dddee0;
  --tag-info-border-color: #e8e9ea;
  --tag-info-color: #909399;
  --tag-info-color-close: #909399;
  --tag-info-color-close-background-hover: #909399;

  --tree-node-hover-background-color: var(--background-color-base);
  --tree-background-color: var(--color-white);
  --tree-font-color: var(--color-text-regular);
  --tree-expand-icon-color: var(--color-text-placeholder);
  --tree-current-color: #ebfbff;

  --dropdown-menuItem-hover-fill: var(--color-primary-light-9);
  --dropdown-menuItem-hover-color: var(--link-color);
  --dropdown-caret-background: rgba(255, 255, 255, 0.5);
  --dropdown-default-border-color: rgba(220, 223, 230, 0.5);

  --badge-background-color: var(--color-danger);

  --card-border-color: var(--border-color-lighter);
  --card-background: var(--color-white);
  --card-color: var(--color-text-primary);

  --slider-main-background-color: var(--color-primary);
  --slider-runway-background-color: var(--border-color-light);
  --color-slider-button-hover: #00c6f7;
  --slider-stop-background-color: var(--color-white);
  --slider-disable-color: var(--color-text-placeholder);

  --steps-border-color: var(--disabled-border-base);

  --menu-item-font-color: var(--color-text-primary);
  --menu-background-color: var(--color-white);
  --menu-item-hover-fill: var(--color-primary-light-9);
  --menu-border-color: #e6e6e6;

  --rate-icon-color: var(--color-text-placeholder);

  --datepicker-panel-background: var(--color-white);
  --datepicker-panel-font: var(--color-text-regular);
  --datepicker-font-color: var(--color-text-regular);
  --datepicker-off-font-color: var(--color-text-placeholder);
  --datepicker-header-font-color: var(--color-text-regular);
  --datepicker-header-label-font: var(--color-text-regular);
  --datepicker-icon-color: var(--color-text-primary);
  --datepicker-border-color: var(--disabled-border-base);
  --datepicker-inner-border-color: #e4e4e4;
  --datepicker-inrange-background-color: var(--border-color-extra-light);
  --datepicker-inrange-hover-background-color: var(--border-color-extra-light);
  --datepicker-range-separator-font: var(--color-text-primary);
  --datepicker-active-color: var(--color-primary);
  --datepicker-hover-font-color: var(--color-primary);
  --color-datepicker-cell-hover: var(--color-white);

  --scrollbar-background-color: rgba(144, 147, 153, 0.3);
  --scrollbar-hover-background-color: rgba(144, 147, 153, .5);

  --carousel-arrow-background: rgba(31, 45, 61, 0.11);
  --carousel-arrow-hover-backgroundhover-background: rgba(31, 45, 61, 0.23);
  --carousel-indicator-out-color: var(--border-color-hover);

  --collapse-border-color: var(--border-color-lighter);
  --collapse-header-background-color: var(--color-white);
  --collapse-header-font-color: var(--color-text-primary);
  --collapse-content-background-color: var(--color-white);
  --collapse-content-font-color: var(--color-text-primary);

  --transfer-border-color: var(--border-color-lighter);
  --transfer-panel-header-background-color: var(--background-color-base);

  --timeline-node-color: var(--border-color-light);

  --backtop-background-color: var(--color-white);
  --backtop-font-color: var(--color-primary);
  --backtop-hover-background-color: var(--border-color-extra-light);

  --link-default-font-color: var(--color-text-regular);
  --link-default-active-color: var(--color-primary);
  --link-disabled-font-color: var(--color-text-placeholder);
  --link-primary-font-color: var(--color-primary-light-10);
  --link-success-font-color: var(--color-success);
  --link-warning-font-color: var(--color-warning);
  --link-danger-font-color: var(--color-danger);
  --link-info-font-color: var(--color-info);
  --link-primary-font-color-hover: #3392ff;
  --link-primary-font-color-disabled: #7fbbff;
  --link-success-font-color-hover: #85ce61;
  --link-success-font-color-disabled: #b3e09c;
  --link-danger-font-color-hover: #ff4e4e;
  --link-danger-font-color-disabled: #ff9090;
  --link-warning-font-color-hover: #ebb463;
  --link-warning-font-color-disabled: #f2d09d;
  --link-info-font-color-hover: #a6a8ad;
  --link-info-font-color-disabled: #c7c9cc;

  --calendar-border: var(--table-border);
  --calendar-selected-background-color-background: #F2F8FE;

  --avatar-font-color: #fff;
  --avatar-background-color: #C0C4CC;
}

:root {
  @extend %base;
  --color-bg: var(--color-white);
  --color-content-bg: var(--color-white);

  --ctfo-title-bg: #f0f0f0;
  --ctfo-title-font: var(--color-text-primary);
  --ctfo-title-border: #12dbec;

  --ctfo-scrollbar-thumb: #c8c8c8;
  --ctfo-scrollbar-track: var(--color-bg);
}

:root[theme=dark] {
  @extend %base;
  --color-white: #000000;
  --color-black: #FFFFFF;
  --color-bg: #172640;
  --color-content-bg: #131e34;

  --color-primary: #0077ff;
  --color-primary-light-0: #1984ff;
  --color-primary-light-1: #3392ff;
  --color-primary-light-2: #4c9fff;
  --color-primary-light-3: #66adff;
  --color-primary-light-4: #7fbbff;
  --color-primary-light-5: #99c8ff;
  --color-primary-light-6: #b2d6ff;
  --color-primary-light-7: #cce3ff;

  --color-success: #00cc66;
  --color-success-light: #ccf4e0;
  --color-success-lighter: #e5f9ef;
  --color-danger: #f56c6c;
  --color-danger-light: #ffd2d2;
  --color-danger-lighter: #ffe8e8;
  --color-warning: #cc9900;
  --color-warning-light: #f4eacc;
  --color-warning-lighter: #f9f4e5;
  --color-info: #969696;
  --color-info-light: #eaeaea;
  --color-info-lighter: #f4f4f4;

  --color-text-primary: #FFFFFF;
  --color-text-regular: #ced0d2;
  --color-text-secondary: #9da0a5;

 // --color-text-placeholder: #6081ab;

  --background-color-base: var(--input-background-color);

  --border-color-base: #334466;
  --border-color-light: #334466;
  --border-color-lighter: #334466;
  --border-color-extra-light: #334466;

  --button-default-font-color: #F5F5F5;
  --button-primary-font-color: #FFFFFF;
  --button-danger-font-color: #FFFFFF;
  --button-default-background-color: transparent;
  --button-default-border-color: var(--border-color-base);

  --button-primary-background-color-hover: #3392ff;
  --button-primary-border-color-hover: #3392ff;
  --button-primary-background-color-active: #006be5;
  --button-primary-border-color-active: #006be5;
  --button-primary-background-color-disabled: #05448f;
  --button-primary-border-color-disabled: #05448f;
  --button-primary-background-color-plain: #e5f1ff;
  --button-primary-border-color-plain: #99c8ff;
  --button-success-background-color-hover: #85ce61;
  --button-success-border-color-hover: #85ce61;
  --button-success-background-color-active: #5cae34;
  --button-success-border-color-active: #5cae34;
  --button-success-background-color-disabled: #396a2c;
  --button-success-border-color-disabled: #396a2c;
  --button-success-background-color-plain: #eff8eb;
  --button-success-border-color-plain: #c2e6b0;
  --button-danger-background-color-hover: #ff4e4e;
  --button-danger-border-color-hover: #ff4e4e;
  --button-danger-background-color-active: #e51e1e;
  --button-danger-border-color-active: #e51e1e;
  --button-danger-background-color-disabled: #851a20;
  --button-danger-border-color-disabled: #851a20;
  --button-danger-background-color-plain: #ffe8e8;
  --button-danger-border-color-plain: #ffa6a6;
  --button-warning-background-color-hover: #ebb463;
  --button-warning-border-color-hover: #ebb463;
  --button-warning-background-color-active: #cf9136;
  --button-warning-border-color-active: #cf9136;
  --button-warning-background-color-disabled: #785a2d;
  --button-warning-border-color-disabled: #785a2d;
  --button-warning-background-color-plain: #fcf5eb;
  --button-warning-border-color-plain: #f5d9b1;
  --button-info-background-color-hover: #a6a8ad;
  --button-info-border-color-hover: #a6a8ad;
  --button-info-background-color-active: #818489;
  --button-info-border-color-active: #818489;
  --button-info-background-color-disabled: #4d525c;
  --button-info-border-color-disabled: #4d525c;
  --button-info-background-color-plain: #f3f4f4;
  --button-info-border-color-plain: #d2d3d6;

  --checkbox-font-color: var(--color-black);
  --checkbox-background-color: #ffffff;
  --checkbox-input-border: #969696;
  --checkbox-disabled-border-color: var(--border-color-base);
  --color-checkbox-disabled-input-fill: #edf2fc;
  --checkbox-checked-font-color: var(--color-black);
  --checkbox-checked-icon-color: var(--color-black);

  --card-background: var(--color-content-bg);
  --card-color: #FFFFFF;
  --card-border-color: #334466;

  --cascader-menu-fill: var(--select-dropdown-background);

  --collapse-header-background-color: #182f57;
  --collapse-content-background-color: #172640;

  --dialog-background-color: var(--color-content-bg);
  // dialog 中包含的 dialog 的背景色
  --inner-dialog-background-color: #092a48;

  --divider-color: #334466;

  --input-disabled-fill: #172540;
  --disabled-fill-base: #172540;
  --disabled-color-base: #6081AB;
  --disabled-border-base: transparent;

  --datepicker-panel-background: var(--color-content-bg);
  --datepicker-panel-font: var(--color-black);
  --datepicker-off-font-color: var(--color-text-placeholder);
  --datepicker-header-font-color: var(--color-black);
  --datepicker-header-label-font: var(--color-black);
  --datepicker-icon-color: var(--color-black);
  --datepicker-border-color: #5d6b86;
  --datepicker-inner-border-color: #e4e4e4;
  --datepicker-range-separator-font: var(--color-black);
  --datepicker-inrange-background-color: #004390;
  --datepicker-inrange-hover-background-color: #004390;
  --datepicker-active-color: var(--color-primary);
  --datepicker-hover-font-color: var(--color-primary);
  --color-datepicker-cell-hover: var(--color-black);

  --dropdown-menuItem-hover-fill: var(--color-primary-light-2);
  --dropdown-menuItem-hover-color: var(--color-text-primary);

  --form-label-font: var(--color-black);

  --input-font-color: var(--color-black);
  --input-border-color: transparent;
  --input-background-color: #21375a;
  --input-border-color-hover: #3388dd;
  --input-fill-disabled: var(--disabled-fill-base);
  --input-color-disabled: var(--font-color-disabled-base);
  --input-hover-border: var(--input-border-color-hover);
  --input-clear-hover-color: var(--color-text-secondary);
  --input-focus-border: var(--input-border-color-hover);
  --input-disabled-placeholder-color: var(--disabled-color-base);

  --link-primary-font-color-hover: #3392ff;
  --link-primary-font-color-disabled: #7fbbff;
  --link-success-font-color-hover: #85ce61;
  --link-success-font-color-disabled: #b3e09c;
  --link-danger-font-color-hover: #ff4e4e;
  --link-danger-font-color-disabled: #ff9090;
  --link-warning-font-color-hover: #ebb463;
  --link-warning-font-color-disabled: #f2d09d;
  --link-info-font-color-hover: #a6a8ad;
  --link-info-font-color-disabled: #c7c9cc;

  --radio-button-border-color: var(--border-color-base);

  --menu-background-color: ##172640;
  --menu-item-font-color: #FFFFFF;
  --menu-item-hover-fill: #0A1C35;
  --menu-border-color: #202E43;

  --radio-button-checked-font-color: var(--color-black);

  --select-border-color-hover: #3388dd;
  --select-disabled-border: var(--disabled-border-base);
  --select-close-hover-color: var(--color-text-secondary);
  --color-select-multiple-input: #666;
  --select-input-focus-border-color: var(--color-primary);
  --select-option-color: var(--color-black);
  --select-option-disabled-color: var(--color-text-placeholder);
  --select-option-disabled-background: var(--color-black);
  --select-option-hover-background: var(--color-primary);
  --select-option-selected-font-color: var(--color-black);
  --select-option-selected-hover: var(--background-color-base);
  --select-group-color: var(--color-info);
  --select-dropdown-background: var(--color-content-bg);
  --select-dropdown-shadow: var(--box-shadow-light);
  --select-dropdown-empty-color: #999;
  --select-dropdown-border: #334466;

  --switch-color: #999999;
  --switch-color-active: var(--color-black);

  --tree-background-color: var(--color-content-bg);
  --tree-node-hover-background-color: #083062;

  --pagination-background-color: #C8C8C8;
  --pagination-background-mode-bg-color: #252F43;
  --pagination-background-mode-color-active: var(--color-black);

  --switch-button-color: var(--color-black);

  --table-background-color: var(--color-content-bg);
  --table-border-color: #334466;
  --table-border: #334466;
  --table-header-background-color: ##172640;
  --table-header-font-color: #12dbec;
  --table-row-background-color: #172640;
  --table-row-background-color-odd: #172640;
  --table-font-color: var(--color-black);
  --table-row-hover-background-color: #083062;
  --table-current-row-background-color: #083062;

  --tag-primary-background-color-plain: #05448f;
  --tag-primary-border-color-plain: #063a78;
  --tag-primary-color-plain: #0077ff;
  --tag-primary-color-close-plain: #0077ff;
  --tag-primary-color-close-background-hover-plain: #0077ff;
  --tag-primary-background-color-dark: #0077ff;
  --tag-primary-border-color-dark: #0077ff;
  --tag-primary-color-dark: #fff;
  --tag-primary-color-close-dark: #05448f;
  --tag-primary-color-close-background-hover-dark: #0262d2;
  --tag-primary-background-color: #073062;
  --tag-primary-border-color: #08264b;
  --tag-primary-color: #0077ff;
  --tag-primary-color-close: #0077ff;
  --tag-primary-color-close-background-hover: #0077ff;
  --tag-success-background-color-plain: #396a2c;
  --tag-success-border-color-plain: #2f5829;
  --tag-success-color-plain: #67c23a;
  --tag-success-color-close-plain: #67c23a;
  --tag-success-color-close-background-hover-plain: #67c23a;
  --tag-success-background-color-dark: #67c23a;
  --tag-success-border-color-dark: #67c23a;
  --tag-success-color-dark: #fff;
  --tag-success-color-close-dark: #396a2c;
  --tag-success-color-close-background-hover-dark: #549e34;
  --tag-success-background-color: #264627;
  --tag-success-border-color: #1d3524;
  --tag-success-color: #67c23a;
  --tag-success-color-close: #67c23a;
  --tag-success-color-close-background-hover: #67c23a;
  --tag-danger-background-color-plain: #851a20;
  --tag-danger-border-color-plain: #6c1820;
  --tag-danger-color-plain: #f56c6c;
  --tag-danger-color-close-plain: #f56c6c;
  --tag-danger-color-close-background-hover-plain: #f56c6c;
  --tag-danger-background-color-dark: #f56c6c;
  --tag-danger-border-color-dark: #f56c6c;
  --tag-danger-color-dark: #fff;
  --tag-danger-color-close-dark: #851a20;
  --tag-danger-color-close-background-hover-dark: #ce1e21;
  --tag-danger-background-color: #54161f;
  --tag-danger-border-color: #3b151f;
  --tag-danger-color: #f56c6c;
  --tag-danger-color-close: #f56c6c;
  --tag-danger-color-close-background-hover: #f56c6c;
  --tag-warning-background-color-plain: #785a2d;
  --tag-warning-border-color-plain: #624b2a;
  --tag-warning-color-plain: #e6a23c;
  --tag-warning-color-close-plain: #e6a23c;
  --tag-warning-color-close-background-hover-plain: #e6a23c;
  --tag-warning-background-color-dark: #e6a23c;
  --tag-warning-border-color-dark: #e6a23c;
  --tag-warning-color-dark: #fff;
  --tag-warning-color-close-dark: #785a2d;
  --tag-warning-color-close-background-hover-dark: #ba8536;
  --tag-warning-background-color: #4c3d27;
  --tag-warning-border-color: #362e24;
  --tag-warning-color: #e6a23c;
  --tag-warning-color-close: #e6a23c;
  --tag-warning-color-close-background-hover: #e6a23c;
  --tag-info-background-color-plain: #4d525c;
  --tag-info-border-color-plain: #40454f;
  --tag-info-color-plain: #909399;
  --tag-info-color-close-plain: #909399;
  --tag-info-color-close-background-hover-plain: #909399;
  --tag-info-background-color-dark: #909399;
  --tag-info-border-color-dark: #909399;
  --tag-info-color-dark: #fff;
  --tag-info-color-close-dark: #4d525c;
  --tag-info-color-close-background-hover-dark: #757980;
  --tag-info-background-color: #323843;
  --tag-info-border-color: #252b37;
  --tag-info-color: #909399;
  --tag-info-color-close: #909399;
  --tag-info-color-close-background-hover: #909399;

  --ctfo-title-bg: #182f57;
  --ctfo-title-font: #F5F5F5;
  --ctfo-title-border: #12dbec;

  --ctfo-scrollbar-thumb: #05458f;
  --ctfo-scrollbar-track: var(--color-bg);

  // 列表load图片的背景色
  --ctfo-load-bg: #0d1528;
  // 缩略图模式下列表的背景色
  --ctfo-sltlist-bg: #182944;

  --popover-background-color: var(--select-dropdown-background);
}

:root[theme=blue] {
  @extend %base;

  --ctfo-title-bg: var(--color-primary);
  --ctfo-title-font: #fff;
  --ctfo-title-border: #12dbec;

  --color-primary: #00a1b8;
  --color-primary-light-1: #19aabf;
  --color-primary-light-2: #33b3c6;
  --color-primary-light-3: #4cbdcd;
  --color-primary-light-4: #66c6d4;
  --color-primary-light-5: #7fd0db;
  --color-primary-light-6: #99d9e2;
  --color-primary-light-7: #b2e2e9;
  --color-primary-light-8: #ccecf0;
  --color-primary-light-9: #e5f5f7;
  --color-success: #67C23A;
  --color-success-light: #e0f2d7;
  --color-success-lighter: #eff8eb;
  --color-danger: #ff2222;
  --color-danger-light: #ffd2d2;
  --color-danger-lighter: #ffe8e8;
  --color-warning: #E6A23C;
  --color-warning-light: #faecd8;
  --color-warning-lighter: #fcf5eb;
  --color-info: #909399;
  --color-info-light: #e8e9ea;
  --color-info-lighter: #f3f4f4;

  --button-primary-background-color-hover: #33b3c6;
  --button-primary-border-color-hover: #33b3c6;
  --button-primary-background-color-active: #0090a5;
  --button-primary-border-color-active: #0090a5;
  --button-primary-background-color-disabled: #05596b;
  --button-primary-border-color-disabled: #05596b;
  --button-primary-background-color-plain: #e5f5f7;
  --button-primary-border-color-plain: #99d9e2;
  --button-success-background-color-hover: #85ce61;
  --button-success-border-color-hover: #85ce61;
  --button-success-background-color-active: #5cae34;
  --button-success-border-color-active: #5cae34;
  --button-success-background-color-disabled: #396a2c;
  --button-success-border-color-disabled: #396a2c;
  --button-success-background-color-plain: #eff8eb;
  --button-success-border-color-plain: #c2e6b0;
  --button-danger-background-color-hover: #ff4e4e;
  --button-danger-border-color-hover: #ff4e4e;
  --button-danger-background-color-active: #e51e1e;
  --button-danger-border-color-active: #e51e1e;
  --button-danger-background-color-disabled: #851a20;
  --button-danger-border-color-disabled: #851a20;
  --button-danger-background-color-plain: #ffe8e8;
  --button-danger-border-color-plain: #ffa6a6;
  --button-warning-background-color-hover: #ebb463;
  --button-warning-border-color-hover: #ebb463;
  --button-warning-background-color-active: #cf9136;
  --button-warning-border-color-active: #cf9136;
  --button-warning-background-color-disabled: #785a2d;
  --button-warning-border-color-disabled: #785a2d;
  --button-warning-background-color-plain: #fcf5eb;
  --button-warning-border-color-plain: #f5d9b1;
  --button-info-background-color-hover: #a6a8ad;
  --button-info-border-color-hover: #a6a8ad;
  --button-info-background-color-active: #818489;
  --button-info-border-color-active: #818489;
  --button-info-background-color-disabled: #4d525c;
  --button-info-border-color-disabled: #4d525c;
  --button-info-background-color-plain: #f3f4f4;
  --button-info-border-color-plain: #d2d3d6;

  --tag-primary-background-color-plain: transparent;
  --tag-primary-border-color-plain: var(--color-primary);
  --tag-primary-color-plain: #00a1b8;
  --tag-primary-color-close-plain: #00a1b8;
  --tag-primary-color-close-background-hover-plain: #00a1b8;
  --tag-primary-background-color-dark: #00a1b8;
  --tag-primary-border-color-dark: #00a1b8;
  --tag-primary-color-dark: #fff;
  --tag-primary-color-close-dark: #05596b;
  --tag-primary-color-close-background-hover-dark: #028499;
  --tag-primary-background-color: var(--color-primary-light-9);
  --tag-primary-border-color: var(--color-primary-light-3);
  --tag-primary-color: #00a1b8;
  --tag-primary-color-close: #00a1b8;
  --tag-primary-color-close-background-hover: #00a1b8;
  --tag-success-background-color-plain: transparent;
  --tag-success-border-color-plain: var(--color-success);
  --tag-success-color-plain: #67c23a;
  --tag-success-color-close-plain: #67c23a;
  --tag-success-color-close-background-hover-plain: #67c23a;
  --tag-success-background-color-dark: #67c23a;
  --tag-success-border-color-dark: #67c23a;
  --tag-success-color-dark: #fff;
  --tag-success-color-close-dark: #396a2c;
  --tag-success-color-close-background-hover-dark: #549e34;
  --tag-success-background-color: var(--color-success-lighter);
  --tag-success-border-color: var(--color-success);
  --tag-success-color: #67c23a;
  --tag-success-color-close: #67c23a;
  --tag-success-color-close-background-hover: #67c23a;
  --tag-danger-background-color-plain: transparent;
  --tag-danger-border-color-plain: var(--color-danger);
  --tag-danger-color-plain: #ff2222;
  --tag-danger-color-close-plain: #ff2222;
  --tag-danger-color-close-background-hover-plain: #ff2222;
  --tag-danger-background-color-dark: #ff2222;
  --tag-danger-border-color-dark: #ff2222;
  --tag-danger-color-dark: #fff;
  --tag-danger-color-close-dark: #851a20;
  --tag-danger-color-close-background-hover-dark: #ce1e21;
  --tag-danger-background-color: var(--color-danger-lighter);
  --tag-danger-border-color: var(--color-danger);
  --tag-danger-color: #ff2222;
  --tag-danger-color-close: #ff2222;
  --tag-danger-color-close-background-hover: #ff2222;
  --tag-warning-background-color-plain: transparent;
  --tag-warning-border-color-plain: var(--color-warning);
  --tag-warning-color-plain: #e6a23c;
  --tag-warning-color-close-plain: #e6a23c;
  --tag-warning-color-close-background-hover-plain: #e6a23c;
  --tag-warning-background-color-dark: #e6a23c;
  --tag-warning-border-color-dark: #e6a23c;
  --tag-warning-color-dark: #fff;
  --tag-warning-color-close-dark: #785a2d;
  --tag-warning-color-close-background-hover-dark: #ba8536;
  --tag-warning-background-color: var(--color-warning-lighter);
  --tag-warning-border-color: var(--color-warning);
  --tag-warning-color: #e6a23c;
  --tag-warning-color-close: #e6a23c;
  --tag-warning-color-close-background-hover: #e6a23c;
  --tag-info-background-color-plain: transparent;
  --tag-info-border-color-plain: var(--color-info);
  --tag-info-color-plain: #909399;
  --tag-info-color-close-plain: #909399;
  --tag-info-color-close-background-hover-plain: #909399;
  --tag-info-background-color-dark: #909399;
  --tag-info-border-color-dark: #909399;
  --tag-info-color-dark: #fff;
  --tag-info-color-close-dark: #4d525c;
  --tag-info-color-close-background-hover-dark: #757980;
  --tag-info-background-color: var(--color-info-lighter);
  --tag-info-border-color: var(--color-info);
  --tag-info-color: #909399;
  --tag-info-color-close: #909399;
  --tag-info-color-close-background-hover: #909399;

  --link-default-font-color: var(--color-primary-light-3);
  --link-primary-font-color: var(--color-primary-light-3);
  --link-primary-font-color-hover: #33b3c6;
  --link-primary-font-color-disabled: #7fd0db;
  --link-success-font-color-hover: #85ce61;
  --link-success-font-color-disabled: #b3e09c;
  --link-danger-font-color-hover: #ff4e4e;
  --link-danger-font-color-disabled: #ff9090;
  --link-warning-font-color-hover: #ebb463;
  --link-warning-font-color-disabled: #f2d09d;
  --link-info-font-color-hover: #a6a8ad;
  --link-info-font-color-disabled: #c7c9cc;

  --input-hover-border: var(--color-primary);

  --select-border-color-hover: var(--color-primary);
}
